<template>
  <div>
      <div class="hearder-search">
        <el-button plain type="primary" @click.native="addBook(0)" size="small">添加分类</el-button>
        <downexcel type="bookAllcate"></downexcel>
      </div>
      <!--本体列表，数据 -->
      <div class="table-line-body mt-10 yangTable">
        <el-table
            :data="newList"
            row-key="id"
            border
            :default-expand-all="isExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="name" label="类目名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="count_number" label="数量/种类"></el-table-column>
          <el-table-column prop="sum_number" label="数量/册"></el-table-column>
          <el-table-column prop="money" label="总金额/元"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="editCate(1, scope.row)"
              >修改
              </el-button>
              <el-button
                  v-if="!scope.row.tid"
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                  @click="editCate(2, scope.row)"
              >新增
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="detel(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--编辑界面-->
      <!--<div v-if="editForm">-->
      <el-dialog :title="tieleName" :visible.sync="editFormVisible" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <el-form label-width="100px">
          <el-form-item label="上级类目">
            <el-select v-model="coryid" placeholder="选择上级类目" size="small">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in selectList"
                         :key="index" :disabled="disabledStatus"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类目名称" prop="name">
            <el-input v-model="coryname" auto-complete="off" placeholder="分类名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible=false" size="small">取消</el-button>
          <el-button type="primary" @click.native="editSubmit" size="small">确认并保存</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tieleName: '', // 弹窗标题
      bookName: '',
      editFormVisible: false, // 编辑界面是否显示
      coryname: '',
      coryid: 0, // 添加分类id
      tableList: [],
      newList: [],
      isExpandAll: false,
      disabledStatus: false,
      selectList: [],
      editId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    InitFn() {
      this.$post('book_cat/index', {p: 1}).then((response) => {
        console.log(response)
        if (response.code === 0) {
          console.log('重置列表', this.$handleTree(response.list, 'id', 'tid'))
          this.newList = this.$handleTree(response.list, 'id', 'tid')
          let list = [{id: 0, name: '主类目'}]
          for (let item of this.newList) {
            list.push(this.getJson(item))
          }
          this.selectList = list
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    gotostring(option) {
      return option.toString()
    },
    addBook() {
      this.tieleName = '添加分类'
      this.coryname = ''
      this.coryid = 0
      this.editFormVisible = true
    },
    // 编辑分类
    editCate(type, row) {
      this.tieleName = '编辑分类'
      this.disabledStatus = true
      // type 1 编辑类目，type 2 添加下级
      if(type===1){
        this.coryid = row.tid?row.tid:0 // 上级类目id
        this.editId = row.id // 编辑id
        this.coryname = row.name
      }else{
        this.coryid = row.id // 上级类目id
        this.editId = 0 // 编辑id
        this.coryname = ''
      }
      this.editFormVisible = true
    },
    // 删除
    detel(row) {
      this.$confirm(`删除类目【${row.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.DetelCotery(row.id)
      }).catch(() => {
      });
    },
    // 确定删除
    DetelCotery(id) {
      this.$post('book_cat/delete', {id: id}).then((response) => {
        console.log(response)
        if (response.code === 0) {
          this.$message.success('删除成功')
          this.InitFn()
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 提交数据
    editSubmit() {
      console.log('提交参数数据:', this.coryname, this.coryid)
      // addBtnStatus 0 添加 1 编辑
      let url_ = 'book_cat/add'
      let data_ = {tid: this.coryid, name: this.coryname}
      if (this.editId) {
        url_ = 'book_cat/edit'
        data_.id = this.editId
      }
      this.$post(url_, data_).then((response) => {
        console.log(response)
        if (response.code === 0) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.editFormVisible = false
          this.InitFn()
        } else {
          console.log('请求失败')
        }
        this.disabledStatus = false
      }).catch((err) => {
        console.log(err)
      })
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
</style>
